<template>
  <view class="hb-w-full hb-h-full hb-relative hb-flex hb-flex-col">
    <view class="hb-bg-white hb-w-full hb-flex-shrink-0">
      <view class="hb-flex hb-items-center hb-mb-4">
        <TmIcon name="ali-icon icon-remarks" color="primary" :font-size="40" />
        <TmText class="hb-ml-2" _class="hb-font-bold" label="共享资料" :font-size="28" />
      </view>

      <TmText _class="hb-mb-4" label="您的好友给您共享的资料文件" color="#646566" :font-size="24" />
    </view>
    <scroll-view
      enable-passive
      enhanced
      :show-scrollbar="false"
      scroll-y
      class="hb-w-full hb-flex-1 hb-h-0"
      refresher-enabled
      :refresher-triggered="refresherTriggered"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onPullDownRefresh"
    >
      <template v-for="item in fileList" :key="item.id">
        <view
          class="hb-flex hb-items-center hb-py-4 hb-border-b hb-border-solid hb-border-[#EBEDF0]"
          @click="handleOpenDocument(item)"
        >
          <TmIcon
            class="hb-flex-shrink-0"
            :name="`ali-icon ${getFileIcon(item.fileSuffix).icon}`"
            :follow-theme="false"
            :color="getFileIcon(item.fileSuffix).color"
            :font-size="80"
          />
          <view class="hb-ml-2 hb-flex-1 hb-flex hb-flex-col hb-justify-between">
            <TmText _class="text-overflow-1 hb-font-bold" :label="item.fileName" :font-size="28" />
            <view class="hb-flex hb-items-center hb-mt-1">
              <TmImage :src="item.iconFileUrl" :width="32" :height="32" :round="25" />
              <TmText class="hb-ml-1" :label="item.name" :font-size="24" color="#969799" />
            </view>
          </view>
        </view>
      </template>
      <Loadmore v-if="fileList.length >= 10" :loading-type="loadingType" />
      <Empty v-if="fileList.length === 0" />
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { knowledgeBaseFileShareList } from '@/api/knowledgeBase';
  import { KnowledgeBaseFileShareListResult } from '@/api/knowledgeBase/types';
  import { IQuery } from '@/api/types';
  import { useUpload } from '@/hooks/file/useUpload';
  import { getFileIcon } from '@/utils';

  const { openDocument } = useUpload();

  defineOptions({
    name: 'SharedResource',
  });

  const fileList = ref<KnowledgeBaseFileShareListResult[]>([]);

  const query = reactive<IQuery>({
    current: 1,
    size: 10,
  });

  const loadingType = ref(0);

  const handleOpenDocument = (item: KnowledgeBaseFileShareListResult) => {
    openDocument({ filePath: item.filePathUrl, fileType: item.fileSuffix });
  };

  // 获取文件列表
  async function getFileList() {
    const res = await knowledgeBaseFileShareList({
      ...unref(query),
      type: 'received',
    });
    loadingType.value = res.records.length === 0 ? 2 : 0;
    fileList.value = [...fileList.value, ...res.records];
  }

  /** 刷新数据 */
  async function refreshFileList() {
    fileList.value = [];
    query.current = 1;
    await getFileList();
  }

  refreshFileList();
  const refresherTriggered = ref(false);
  const onPullDownRefresh = async () => {
    refresherTriggered.value = true;
    await refreshFileList();
    refresherTriggered.value = false;
  };

  const onScrollToLower = async () => {
    console.log('onScrollToLower');
    if (loadingType.value === 1 || loadingType.value === 2) return;
    loadingType.value = 1;
    query.current++;
    await getFileList();
  };
</script>

<style lang="scss" scoped></style>
